<template>
  <div class="register-container">
    <div class="register-form">
      <form @submit.prevent="handleRegister">
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" id="username" v-model="formData.accountName" placeholder="请输入用户名" required />
        </div>
        <div class="form-group">
          <label for="phone">手机号</label>
          <input type="text" id="phone" v-model="formData.phone" placeholder="请输入11位手机号"  required />
        </div>
        <div class="form-group">
          <label for="code">验证码</label>
          <input type="text" id="code" v-model="formData.code" placeholder="请输入验证码" required />
          <button type="button" class="code-btn" :disabled="counting" @click="getCode">
            {{ codeText }}
          </button>
        </div>
        <div class="form-group">
          <label for="password">设置密码</label>
          <input type="password" id="password" v-model="formData.password" placeholder="请输入6-16位密码" minlength="6" maxlength="16" required />
        </div>
        <div class="form-group">
          <label for="confirmPassword">确认密码</label>
          <input type="password" id="confirmPassword" v-model="formData.confirmPassword" placeholder="请输入确认密码" minlength="6" maxlength="16" required />
        </div>
        <button type="submit" class="register-btn">注册</button>
        <div class="login-link">
          已有账户，<a href="#" @click.prevent="goLogin">去登陆</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    return {
      formData: {
        accountName: '',
        phone:'',
        code: '',
        password: '',
        confirmPassword: ''
      },
      counting: false,
      countdown: 60,
      codeText: '获取验证码'
    };
  },
  methods: {
    getCode() {
      const phoneReg = /^1[3456789]\d{9}$/;
      console.log(this.formData.phone)
      if (!phoneReg.test(this.formData.phone)) {
       alert('请输入正确的11位手机号');
        return;
      }
      if (this.counting) return;
      
      // 发送验证码请求
      this.$request.get(`/authCenter/auth/register/code/${this.formData.phone}`).then(res => {
        if (res.code === 200) {
          this.$message.success('验证码发送成功，请注意查收');
          // 启动倒计时
          this.counting = true;
          this.codeText = `${this.countdown}s`;
          const timer = setInterval(() => {
            this.countdown--;
            this.codeText = `${this.countdown}s`;
            if (this.countdown <= 0) {
              clearInterval(timer);
              this.counting = false;
              this.countdown = 60;
              this.codeText = '获取验证码';
            }
          }, 1000);
        } else {
          this.$message.error(res.msg || '验证码发送失败');
        }
      }).catch(err => {
        console.error('发送验证码出错:', err);
        this.$message.error('网络错误，请稍后重试');
      });
    },
    handleRegister() {
      if (this.formData.password!== this.formData.confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }
      this.$request.post('/authCenter/auth/register', this.formData)
       .then(res => {
        console.log('完整响应：',res)
          if (res.code === 200) {
           this.$message.success(res.msg || '操作成功')
            this.$router.push('/login') 
          } else{
            this.$message.error(res.msg);
          }
        })
       
      
    },
    goLogin() {
      // 这里可以添加跳转到登录页面的逻辑，比如使用vue-router
      this.$router.push('/login') 
    }
  }
};
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #e6f7f3;
}
.register-form {
  width: 540px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
}
.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.code-btn {
  margin-left: 10px;
  padding: 6px 12px;
  background-color: #00bfff;
  color: #fff;
  border: none;
  margin-left: 2px;
  margin-top: 2px;
  border-radius: 4px;
  cursor: pointer;
}
.code-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.register-btn {
  width: 100%;
  padding: 10px;
  background-color: #7fdc93;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.login-link {
  text-align: center;
  margin-top: 10px;
}
.login-link a {
  color: #00bfff;
  text-decoration: none;
}
</style>